---
title: useFocusInputField
description: API reference for the useFocusInputField hook in Strapi
tags:
  - hooks
  - helper-plugin
  - visual editing
---

Used to focus any input and scrolls into the center of the viewport when it's provided name matches the [`URLSearchParams`](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams)
key `field`. Internally wraps the `useQuery` hook and checks against the provided name with the defined key.

## Usage

```jsx
import { useFocusInputField } from '@strapi/helper-plugin';

const MyComponent = (props) => {
  const fieldRef = useFocusInputField(props.name)

  return (
    <input ref={fieldRef} {...props}>
  );
};
```

## Typescript

```ts
function useFocusInputField(fieldName: string): (node: HTMLElement) => void;
```

## Notes

Due to the current public `forwardRef` API of [`TextInput`](https://design-system-git-main-strapijs.vercel.app/?path=/docs/design-system-components-textinput--base)
in the design-system, this hook _will_ check if there is an `input` key on the attached ref. If so, it will access that object as if it is a ref itself i.e. `field.input.current`
and use that object to both focus and scroll into view.
